import React, { useState } from 'react';
import Menu from './components/Menu/menu';
import MenuItem from './components/Menu/menuItem';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import Icon from './components/Icon/icon';
import SubMenu from './components/Menu/subMenu';
import Transition from './components/Transition/transition';
import Button from './components/Button/button';

library.add(fas) // fas 所有图标的集合
function App() {
  const [show, setShow] = useState(false)
  return (
    <div className="App">
      <header className="App-header">
      <Icon icon="coffee" theme='danger' size='6x'/>
        <Menu defaultIndex="0" onSelect={(index)=> {console.log(index)}}>
          <MenuItem >
          1
          </MenuItem>
          <MenuItem disabled>
          2
          </MenuItem>
          <MenuItem >
          3
          </MenuItem>
          <SubMenu title='dropdown'>
            <MenuItem >
              dropdown 1
            </MenuItem>
            <MenuItem >
              dropdown 2
            </MenuItem>
          </SubMenu>
        </Menu>
        <Button onClick={() => {setShow(!show)}}>
          Toggle
        </Button>
        <Transition
          in={show}
          timeout={300}
          animation='zoom-in-left'
        >
          <div>
            内容1
          </div>
        </Transition>
        <Transition
          in={show}
          timeout={300}
          animation='zoom-in-left'
          wrapper
        >
           <Button onClick={() => {setShow(!show)}}>按钮。。。</Button>
        </Transition>
      </header>
    </div>
  );
}

export default App;
